<template>
  <div class="nearby">
    <h3 class="nearby__title">附近店铺</h3>
    <router-link v-for="item in nearbyList" :to="`/shop/${item._id}`">
      <ShopInfo :item="item" :hideBorder="false"></ShopInfo>
    </router-link>
  </div>
</template>

<script>
import { ref } from 'vue';
import { get } from '@/utils/request';
import ShopInfo from '@/components/ShopInfo.vue';

// 获取附近商铺逻辑
const useNearbyListEffect = () => {
  const nearbyList = ref([]);
  const getNearbyList = async () => {
    try {
      const result = await get('/api/shop/hot-list');
      console.log('result: ', result);
      if (result?.errno === 0 && result?.data?.length) {
        nearbyList.value = result.data;
      }
    } catch (error) {}
  };
  return { nearbyList, getNearbyList };
};

export default {
  name: 'Nearby',
  components: { ShopInfo },
  setup() {
    const { nearbyList, getNearbyList } = useNearbyListEffect();
    getNearbyList();

    return { nearbyList };
  },
};
</script>
<style lang="scss" scoped>
@import '@/style/viriables.scss';
@import '@/style/mixins.scss';
.nearby {
  &__title {
    margin: 0.16rem 0 0.02rem 0;
    font-size: 0.18rem;
    font-weight: bold;
    color: $content-fontcolor;
  }
  a {
    text-decoration: none;
  }
}
</style>